<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <canvas id="canvas" width="400" height="400"></canvas>
    <script>
        window.onload = function () {
            var canvas = document.getElementById('canvas'),
                context = canvas.getContext('2d'),
                p1 = { x: 0, y: 0 },
                p2 = { x: 100, y: 100 },
                c1 = {x:150, y:150,radius:0},
                c2 = {x:150, y:150,radius:50}
                //放射性渐变
                gradient = context.createRadialGradient(c1.x, c1.y, c1.radius, 
                                                        c2.x, c2.y, c2.radius)
                //线性渐变
                // gradient = context.createLinearGradient(p1.x, p1.y, p2.x, p2.y)
                gradient.addColorStop(0,'#ffffff')
                // gradient.addColorStop(0.2,'#ff00ff')
                gradient.addColorStop(1,'#ff0000')
                context.fillStyle = gradient
                context.fillRect(100,100, 150, 150)
                // context.q(0,0, 100, 100)



        }
    </script>
</body>

</html>